<template>
    <fy-card style="text-align: left">
        <template #body>
            <div class="card-header">分类</div>
        <div class="card-list">
            <div class="card-list-item" v-for="item in categories" :key="item.id" @click="goToDetail(item)">
                <div class="card-list-item-title">- {{item.name}}</div>
                <div class="card-list-item-num">{{item.num}}</div>
            </div>
        </div>
        </template>
    </fy-card>
</template>

<script setup>

import { onMounted, ref } from 'vue'
import { useRouter } from "vue-router";
import { useBlogsStore } from '@/stores/blog.js'
import { useGlobalStore } from '@/stores/global.js'

import FyCard from '@/components/base/FyCard.vue';

import HotBlogItem from '@/components/LatestBlogItem.vue'
import request from '@/utils/request.js'

const globalStore = useGlobalStore();
const blogStore = useBlogsStore();
let categories = ref([
    {
        id: 1,
        name: 'JavaScript技术栈',
        num: 13
    },
    {
        id: 2,
        name: 'Vue技术栈',
        num: 22
    },
    {
        id: 3,
        name: 'React技术',
        num: 13
    },
    {
        id: 4,
        name: 'Java技术栈',
        num: 23
    }
]);

const router = useRouter();

onMounted(() => {
    blogStore.getHotBlogs().then((result) => {
        console.log("热门文章：", result);
    })
})

let goToDetail = async (item) => {
    console.log('跳转到某个分类页面：id=' + item.id);
    const navigationResult = await router.push({name:'categories-detail', params:{id: item.id}});
    if (!navigationResult) { // 路由跳转成功
        globalStore.updateNavTitle(item.name);
    }
}

</script>

<style lang="scss" scoped>

.card-wrapper {
    @include card;
    text-align: left;
}

.card-header {
    margin-left: 10px;
}

.card-list {
    // background-color: green;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 5px 10px;
    font-size: 14px;

    .card-list-item {
        // background-color: $bg-color-grey;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        cursor: pointer;

        .card-list-item-num {
            color: var(--text-color-soft);
        }

        &:hover {
            .card-list-item-title, .card-list-item-num {
                color: var(--primary-color);
            }
        }
    }
}
</style>